<template>
  <div class="chat-msg-item" :class="active ? 'active' : ''">
    <div
      class="chat-msg-tip"
      v-if="
        msgInfo.type == $enums.MESSAGE_TYPE.RECALL ||
        msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT
      "
    >
      {{ msgInfo.content }}
    </div>
    <div
      class="chat-msg-tip"
      v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME"
      :key="timeKey"
    >
      {{ showTime() }}
    </div>
    <div
      class="chat-msg-normal"
      v-if="isNormal"
      :class="{ 'chat-msg-mine': mine }"
    >
      <div class="head-image">
        <head-image
          :disabled="avatarDisabled"
          :name="showName"
          :size="38"
          :url="headImage"
          :id="msgInfo.sendId"
        ></head-image>
      </div>
      <div class="chat-msg-content">
        <div
          v-show="mode == 1 && msgInfo.groupId && !msgInfo.selfSend"
          class="chat-msg-top"
        >
          <span>{{ showName }}</span>
        </div>
        <div v-show="mode == 2" class="chat-msg-top">
          <span>{{ showName }}</span>
          <span>{{ $date.toTimeText(msgInfo.sendTime) }}</span>
        </div>
        <div
          class="chat-msg-bottom"
          @contextmenu.prevent="showMessageMenu($event)"
        >
          <div ref="chatMsgBox" class="box">
            <span
              v-if="
                msgInfo.burn &&
                msgInfo.selfSend &&
                msgInfo.type == $enums.MESSAGE_TYPE.TEXT
              "
              class="my_burn text_icon shannon-iconfont shannon-huo1"
            >
            </span>

            <!-- 阅后即焚消息按钮 -->
            <span
              class="chat-msg-text btn"
              v-if="
                msgInfo.type == $enums.MESSAGE_TYPE.TEXT &&
                msgInfo.burn &&
                !msgInfo.selfSend &&
                !msgInfo.isBurn
              "
              @click="showMessageAndBurn"
              >{{ $t("点击查看消息") }}</span
            >
            <!-- 阅后即焚消息 -->
            <span
              class="chat-msg-text"
              :class="{ delete: msgInfo.isBurn }"
              v-else-if="
                msgInfo.type == $enums.MESSAGE_TYPE.TEXT &&
                msgInfo.burn &&
                !msgInfo.selfSend &&
                msgInfo.isBurn
              "
              v-html="$emo.transform(msgInfo.content)"
            ></span>

            <!-- 普通消息、自己的阅后即焚 -->
            <span
              class="chat-msg-text"
              v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"
              v-html="$emo.transform(msgInfo.content)"
            ></span>

            <span
              class="chat-msg-text"
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.REDENVELOPE"
              >{{ $t("[收到红包,请打开手机查看]") }}</span
            >
            <div
              class="chat-msg-image"
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"
            >
              <div
                v-loading="loading"
                :element-loading-text="$t('上传中..')"
                element-loading-background="rgba(0, 0, 0, 0.4)"
              >
                <span
                  v-if="msgInfo.burn && msgInfo.selfSend"
                  class="my_burn img_icon shannon-iconfont shannon-huo1"
                >
                </span>

                <!-- @click="showFullImageBox()"  -->
                <el-image-viewer
                  v-if="showViewer"
                  :on-close="closeViewer"
                  :url-list="imgShowList"
                  :z-index="9999"
                />
                <!-- 未读即焚消息 -->
                <span
                  class="chat-msg-text btn"
                  v-if="msgInfo.burn && !msgInfo.selfSend && !msgInfo.isBurn"
                  @click="showMessageAndBurn"
                  >{{ $t("点击查看图片") }}</span
                >

                <!-- socket消息回显 -->
                <el-image
                  v-else-if="
                    msgInfo.burn &&
                    !msgInfo.selfSend &&
                    msgInfo.isBurn &&
                    !msgInfo.content
                  "
                  style="width: 100px"
                  class="send-image"
                  @click="onShowViewer"
                  :src="require('../../../public/burnImage.jpg')"
                  fit="scale-down"
                >
                </el-image>

                <!-- 本地消息 -->
                <el-image
                  v-else-if="
                    msgInfo.burn &&
                    !msgInfo.selfSend &&
                    msgInfo.isBurn &&
                    msgInfo.content
                  "
                  style="width: 100px"
                  class="send-image"
                  @click="onShowViewer"
                  :src="JSON.parse(msgInfo.content).thumbUrl"
                  fit="scale-down"
                >
                </el-image>

                <!-- 普通消息 -->
                <el-image
                  v-else
                  style="width: 100px"
                  class="send-image"
                  @click="onShowViewer"
                  :src="JSON.parse(msgInfo.content).thumbUrl"
                  fit="scale-down"
                >
                </el-image>
              </div>
              <span
                :title="$t('发送失败')"
                v-show="loadFail"
                @click="onSendFail"
                class="send-fail el-icon-warning"
              ></span>
            </div>
            <div
              class="chat-msg-product"
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.PRODUCT"
            >
              <chat-product :chat="JSON.parse(msgInfo.content)" />
            </div>
            <div
              class="chat-msg-video"
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.VIDEO"
            >
              <video
                ref="videoPlayer"
                class="send-video"
                controls
                preload="none"
                :poster="JSON.parse(msgInfo.content).thumbUrl"
                :src="JSON.parse(msgInfo.content).url"
              />
              <span
                :title="$t('发送失败')"
                v-show="loadFail"
                @click="onSendFail"
                class="send-fail el-icon-warning"
              ></span>
            </div>
            <div
              class="chat-msg-file"
              @click="checkFile(data)"
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE"
            >
              <div class="chat-file-box" v-loading="loading">
                <div class="chat-file-info">
                  <el-link
                    :underline="false"
                    class="chat-file-name"
                    target="_blank"
                    type="primary"
                    >{{ data.name }}</el-link
                  >
                  <!--  :href="data.url?.url"
                    :download="data.name" -->
                  <div class="chat-file-size">{{ fileSize }}</div>
                </div>
                <div class="chat-file-icon">
                  <!-- <span type="primary" class="el-icon-document"></span> -->
                  <el-image
                    style="width: 50px; height: 50px"
                    v-show="
                      msgInfo.type == $enums.MESSAGE_TYPE.FILE &&
                      data.name.indexOf('.xlsx') != -1
                    "
                    :src="require('../../assets/image/excel.png')"
                  ></el-image>
                  <el-image
                    style="width: 50px; height: 50px"
                    v-show="
                      msgInfo.type == $enums.MESSAGE_TYPE.FILE &&
                      data.name.indexOf('.docx') != -1
                    "
                    :src="require('../../assets/image/word.png')"
                  ></el-image>
                </div>
              </div>
              <span
                :title="$t('发送失败')"
                v-show="loadFail"
                @click="onSendFail"
                class="send-fail el-icon-warning"
              ></span>
            </div>
          </div>
          <div
            class="chat-msg-voice"
            v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO"
            @click="onPlayVoice()"
          >
            <audio controls :src="JSON.parse(msgInfo.content).url.url"></audio>
          </div>

          <div class="chat-action chat-msg-text" v-if="isAction">
            <span
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE"
              :title="$t('重新呼叫')"
              @click="$emit('call')"
              class="iconfont icon-chat-voice"
            ></span>
            <span
              v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO"
              :title="$t('重新呼叫')"
              @click="$emit('call')"
              class="iconfont icon-chat-video"
            ></span>
            <span>{{ msgInfo.content }}</span>
          </div>
          <div
            class="quote-message"
            v-if="msgInfo.quoteMessage"
            @contextmenu.prevent.stop="showQuoteMenu($event)"
          >
            {{ msgInfo.quoteMessage }}
            <chat-quote-message
              :msgInfo="msgInfo.quoteMessage"
              @click.native.stop="$emit('locateQuote', msgInfo)"
              :showName="quoteShowName"
            ></chat-quote-message>
          </div>
          <div
            class="chat-msg-status"
            v-if="!isAction && msgInfo.sendId != msgInfo.recvId"
          >
            <!-- <span class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
							&& msgInfo.status == $enums.MESSAGE_STATUS.READED">{{ $t('已读') }}
						</span>
						<span class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId
							&& msgInfo.status != $enums.MESSAGE_STATUS.READED">{{ $t('未读') }}
						</span> -->
          </div>
          <div
            class="chat-receipt"
            v-show="msgInfo.receipt"
            @click="onShowReadedBox"
          >
            <span
              v-if="msgInfo.receiptOk"
              class="icon iconfont icon-ok"
              :title="$t('全体已读')"
            ></span>
            <span v-else>{{ msgInfo.readedCount }}{{ $t("人已读") }}</span>
          </div>
        </div>
      </div>
    </div>
    <right-menu
      v-show="menu && rightMenu.show"
      :pos="rightMenu.pos"
      :items="menuItems"
      @close="rightMenu.show = false"
      @select="onSelectMenu"
    ></right-menu>
    <chat-group-readed
      ref="chatGroupReadedBox"
      :msgInfo="msgInfo"
      :groupMembers="groupMembers"
    ></chat-group-readed>
    <check-file-dialog
      ref="checkFileDialog"
      @closeCheckFile="closeCheckFile"
      :isCheckFile="isCheckFile"
      :checkFileObj="checkFileObj"
    ></check-file-dialog>
  </div>
</template>

<script>
import ChatProduct from "./ChatProduct.vue";
import CheckFileDialog from "./CheckFileDialog.vue";
import HeadImage from "../common/HeadImage.vue";
import RightMenu from "../common/RightMenu.vue";
import ChatGroupReaded from "./ChatGroupReaded.vue";
import ElImageViewer from "element-ui/packages/image/src/image-viewer"; // 导入组件
import ChatQuoteMessage from "./ChatQuoteMessage.vue";
export default {
  name: "messageItem",
  components: {
    HeadImage,
    RightMenu,
    ChatGroupReaded,
    ChatProduct,
    ElImageViewer,
    ChatQuoteMessage,
    CheckFileDialog,
  },
  props: {
    avatarDisabled: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: Number,
      default: 1,
    },
    active: {
      type: Boolean,
      default: false,
    },
    mine: {
      type: Boolean,
      required: true,
    },
    headImage: {
      type: String,
      required: true,
    },
    showName: {
      type: String,
      required: true,
    },
    quoteShowName: {
      type: String,
      default: "",
    },
    msgInfo: {
      type: Object,
      required: true,
    },
    groupMembers: {
      type: Array,
    },
    menu: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      checked: [],
      checkFileObj: {},
      isCheckFile: false,
      timeKey: 0,
      audioPlayState: "STOP",
      rightMenu: {
        show: false,
        pos: {
          x: 0,
          y: 0,
        },
      },
      menuItems: [],
      showViewer: false,
    };
  },
  mounted() {
    setInterval(() => {
      // 强制更新计算属性
      // console.log('mounted')
      this.timeKey++;
      // this.$forceUpdate();
    }, 30000); // 每30秒更新一次
  },
  methods: {
    checkFile(e) {
      this.checkFileObj = e;
      console.log(this.checkFileObj, "???");
      this.isCheckFile = true;
    },
    closeCheckFile() {
      this.checkFileObj = {};
      this.isCheckFile = false;
    },
    showMessageAndBurn() {
      this.$emit("showMessageAndBurn", this.msgInfo.id);
    },
    showTime() {
      return this.$date.toTimeText(this.msgInfo.sendTime, true);
    },
    onSendFail() {
      this.$message.error(
        "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送"
      );
    },
    showFullImageBox() {
      let imageUrl = JSON.parse(this.msgInfo.content).url;
      if (imageUrl) {
        this.$store.commit("showFullImageBox", imageUrl);
      }
    },
    onPlayVoice() {
      if (!this.audio) {
        this.audio = new Audio();
      }
      this.audio.src = JSON.parse(this.msgInfo.content).url;
      this.audio.play();
      this.onPlayVoice = "RUNNING";
    },
    showMenu(e) {
      console.log(this.rightMenu, ",rightMenu");

      this.rightMenu.pos = {
        x: e.x,
        y: e.y,
      };
      this.rightMenu.show = "true";
    },
    showMessageMenu(e) {
      //   console.log(e, "???e");
      //   console.log(
      //     this.$enums.MESSAGE_TYPE.FILE,
      //     ",this.$enums.MESSAGE_TYPE.FILE",
      //     this.rightMenu,
      //     "rightMenu"
      //   );
      this.menuItems = [];
      if (this.msgInfo.burn) return;
      console.log(this.msgInfo, "...msgInfo");
      if (
        this.msgInfo.selfSend &&
        this.msgInfo.id > 0 &&
        (this.msgInfo.type == this.$enums.MESSAGE_TYPE.IMAGE ||
          this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT)
      ) {
        this.menuItems.push({
          key: "COPY",
          name: "复制",
          icon: "el-icon-delete",
        });
      }
      if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
        this.menuItems.push({
          key: "RECALL",
          name: "撤回",
        });
      }
      if (
        this.msgInfo.type != this.$enums.MESSAGE_TYPE.REDENVELOPE &&
        this.msgInfo.type != this.$enums.MESSAGE_TYPE.TRANS_FER &&
        this.msgInfo.type != this.$enums.MESSAGE_TYPE.AUDIO &&
        this.msgInfo.id > 0
      ) {
        this.menuItems.push({
          key: "SHARE",
          name: "转发",
        });
      }

      if (this.$msgType.isNormal(this.msgInfo.type)) {
        this.menuItems.push({
          key: "QUOTE",
          name: "引用",
        });
      }
      if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.FILE) {
        this.menuItems.push({
          key: "download",
          name: "另存为",
          icon: "el-icon-download",
        });
      }
      //   04/23---添加
      // this.menuItems.push({
      //   key: "multiple",
      //   name: "多选",
      //   icon: "el-icon-position",
      // });
      this.menuItems.push({
        key: "DELETE",
        name: "删除",
      });
      // xiugai----04/22
      if (
        this.msgInfo.type == this.$enums.MESSAGE_TYPE.VIDEO ||
        this.msgInfo.type == this.$enums.MESSAGE_TYPE.IMAGE
      ) {
        this.menuItems.push({
          key: "download",
          name: "另存为",
          icon: "el-icon-download",
        });
      }
      this.showMenu(e);
    },
    showQuoteMenu(e) {
      this.menuItems = [];
      if (
        this.msgInfo.quoteMessage &&
        this.msgInfo.quoteMessage.status != this.$enums.MESSAGE_STATUS.RECALL
      ) {
        this.menuItems.push({
          key: "LOCATE_QUOTE",
          name: "定位到原消息",
        });
      }
      this.showMenu(e);
    },
    onSelectMenu(item) {
      // 菜单id转驼峰作为事件key
      let eventKey = item.key
        .toLowerCase()
        .replace(/_([a-z])/g, (g) => g[1].toUpperCase());
      console.log(eventKey, "??eventKey", this.msgInfo, "??msgInfo");

      this.$emit(eventKey, this.msgInfo);
      if (eventKey == "multiple") {
        this.$store.commit("setMultiple", true);
      }
    },
    onShowReadedBox() {
      let rect = this.$refs.chatMsgBox.getBoundingClientRect();
      this.$refs.chatGroupReadedBox.open(rect);
    },
    onShowViewer() {
      this.showViewer = true;
      // this.$nextTick(() => {
      // 	const wrapper = document.querySelector('.el-image-viewer__actions__inner');
      // 	console.log("🚀🚀🚀 ~ this.$nextTick ~ wrapper:", wrapper)
      // 	const copyBtn = document.createElement('button');
      // 	copyBtn.textContent = '复制图片';
      // 	copyBtn.onclick = async () => {
      // 		this.$emit("copy", this.msgInfo);
      // 	};
      // 	wrapper.appendChild(copyBtn);
      // });
    },
    closeViewer() {
      this.showViewer = false;
    },
  },
  computed: {
    imgShowList() {
      let url;
      if (
        this.msgInfo.burn &&
        !this.msgInfo.selfSend &&
        this.msgInfo.isBurn &&
        !this.msgInfo.content
      ) {
        url = require("../../../public/burnImage.jpg");
      } else {
        url = JSON.parse(this.msgInfo.content).url;
      }
      return [url];
    },
    loading() {
      return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
    },
    loadFail() {
      return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
    },
    data() {
      return JSON.parse(this.msgInfo.content);
    },
    fileSize() {
      let size = this.data.size;
      if (size > 1024 * 1024) {
        return Math.round(size / 1024 / 1024) + "M";
      }
      if (size > 1024) {
        return Math.round(size / 1024) + "KB";
      }
      return size + "B";
    },
    // menuItems() {
    // 	let items = [];
    // 	// if (this.msgInfo.type !== this.$enums.MESSAGE_TYPE.PRODUCT) {
    // 	// 	items.push({
    // 	// 		key: 'COPY',
    // 	// 		name: '复制',
    // 	// 		icon: 'el-icon-delete'
    // 	// 	});
    // 	// }
    // 	if (this.msgInfo.type !== this.$enums.MESSAGE_TYPE.TEXT) {
    // 		items.push({
    // 			key: 'download',
    // 			name: '另存为',
    // 			icon: 'el-icon-download'
    // 		});
    // 	}
    // 	items.push({
    // 		key: 'SHARE',
    // 		name: '转发',
    // 		icon: 'el-icon-share'
    // 	});
    // 	items.push({
    // 		key: 'DELETE',
    // 		name: '删除',
    // 		icon: 'el-icon-delete'
    // 	});

    // 	if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
    // 		items.push({
    // 			key: 'RECALL',
    // 			name: '撤回',
    // 			icon: 'el-icon-refresh-left'
    // 		});
    // 	}
    // 	if (this.$msgType.isNormal(this.msgInfo.type)) {
    // 		this.menuItems.push({
    // 			key: 'QUOTE',
    // 			name: '引用'
    // 		});
    // 	}

    // 	return items;
    // },
    isAction() {
      return this.$msgType.isAction(this.msgInfo.type);
    },
    isNormal() {
      const type = this.msgInfo.type;
      return this.$msgType.isNormal(type) || this.$msgType.isAction(type);
    },
    htmlText() {
      let color = this.msgInfo.selfSend ? "white" : "";
      let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color);
      return this.$emo.transform(text);
    },
  },
};
</script>

<style lang="scss">
.active {
  background: #eee;
}

.chat-msg-item {
  padding: 2px 0;
  //   position: relative;
  .chat-msg-tip {
    line-height: 50px;
    font-size: var(--im-font-size-small);
    color: var(--im-text-color-light);
  }

  .chat-msg-normal {
    position: relative;
    font-size: 0;
    padding-left: 48px;
    min-height: 50px;
    margin-top: 10px;

    .head-image {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 0;
      left: 0;
    }

    .chat-msg-content {
      text-align: left;

      .send-fail {
        color: #e60c0c;
        font-size: 30px;
        cursor: pointer;
        margin: 0 20px;
      }

      .chat-msg-top {
        display: flex;
        flex-wrap: nowrap;
        color: var(--im-text-color-light);
        font-size: var(--im-font-size);
        line-height: 20px;

        span {
          margin-right: 12px;
        }
      }

      .chat-msg-bottom {
        display: inline-block;
        padding-right: 300px;
        padding-left: 5px;

        .chat-msg-text {
          display: inline-flex;
          position: relative;
          line-height: 26px;
          padding: 6px 10px;
          background-color: var(--im-background);
          border-radius: 10px;
          font-size: var(--im-font-size);
          text-align: left;
          white-space: pre-wrap;
          word-break: break-all;

          &.delete {
            background-color: red;
          }

          &:after {
            content: "";
            position: absolute;
            left: -10px;
            top: 13px;
            width: 0;
            height: 0;
            border-style: solid dashed dashed;
            border-color: #eee transparent transparent;
            overflow: hidden;
            border-width: 10px;
          }

          &.btn {
            cursor: pointer;
            color: #fff;
            background-color: #255f46;

            &:after {
              border-color: #255f46 transparent transparent;
            }
          }

          &.delete {
            cursor: pointer;
            color: #fff;
            background-color: red;

            &:after {
              border-color: red transparent transparent;
            }
          }
        }

        .chat-msg-image {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;

          .send-image {
            min-width: 200px;
            min-height: 150px;
            max-width: 400px;
            max-height: 300px;
            border-radius: 8px;
            cursor: pointer;
          }
        }

        .chat-msg-video {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;

          .send-video {
            min-width: 200px;
            max-width: 300px;
            max-height: 300px;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            object-fit: contain;
          }
        }

        .chat-msg-file {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          margin-bottom: 2px;

          .chat-file-box {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            min-height: 60px;
            box-shadow: var(--im-box-shadow-light);
            border-radius: 4px;
            padding: 10px 15px;

            .chat-file-info {
              flex: 1;
              height: 100%;
              text-align: left;
              font-size: 14px;
              margin-right: 10px;

              .chat-file-name {
                display: inline-block;
                min-width: 160px;
                max-width: 220px;
                font-size: 14px;
                margin-bottom: 4px;
                white-space: pre-wrap;
                word-break: break-all;
              }

              .chat-file-size {
                font-size: var(--im-font-size-smaller);
                color: var(--im-text-color-light);
              }
            }

            .chat-file-icon {
              height: 50px;
              width: 50px;
            }
          }

          .send-fail {
            color: #e60c0c;
            font-size: 30px;
            cursor: pointer;
            margin: 0 20px;
          }
        }

        .chat-msg-voice {
          font-size: 14px;
          cursor: pointer;

          audio {
            height: 45px;
            padding: 5px 0;
          }
        }

        .chat-action {
          display: flex;
          align-items: center;

          .iconfont {
            cursor: pointer;
            font-size: 22px;
            padding-right: 8px;
          }
        }

        .quote-message {
          display: block;
          margin-top: 3px;
          cursor: pointer;
        }

        .chat-msg-status {
          display: block;

          .chat-readed {
            font-size: 12px;
            color: var(--im-text-color-light);
          }

          .chat-unread {
            font-size: var(--im-font-size-smaller);
            color: var(--im-color-danger);
          }
        }

        .chat-receipt {
          font-size: var(--im-font-size-smaller);
          cursor: pointer;
          color: var(--im-text-color-light);

          .icon-ok {
            font-size: 20px;
            color: var(--im-color-sucess);
          }
        }

        .chat-at-user {
          padding: 2px 5px;
          border-radius: 3px;
          cursor: pointer;
        }
      }
    }

    &.chat-msg-mine {
      text-align: right;
      padding-left: 0;
      padding-right: 48px;

      .head-image {
        left: auto;
        right: 0;
      }

      .chat-msg-content {
        text-align: right;

        .chat-msg-top {
          flex-direction: row-reverse;

          span {
            margin-left: 12px;
            margin-right: 0;
          }
        }

        .chat-msg-bottom {
          padding-left: 180px;
          padding-right: 5px;

          .box {
            position: relative;

            .my_burn {
              position: absolute;
              color: red;
              left: 0;
              top: 0;
              z-index: 1;
              font-size: 20px;
            }

            .my_burn.text_icon {
              transform: translate(10%, -60%);
            }

            .my_burn.img_icon {
              transform: translate(-50%, -60%);
            }
          }

          .chat-msg-text {
            margin-left: 10px;
            background-color: var(--im-color-primary-light-2);
            color: #fff;

            &:after {
              left: auto;
              right: -10px;
              border-top-color: var(--im-color-primary-light-2);
            }
          }

          .chat-msg-image {
            flex-direction: row-reverse;
          }

          .chat-msg-video {
            flex-direction: row-reverse;
          }

          .chat-msg-file {
            flex-direction: row-reverse;
          }

          .chat-action {
            flex-direction: row-reverse;

            .iconfont {
              transform: rotateY(180deg);
            }
          }
        }
      }
    }
  }
}
.el-link--inner {
  color: #000;
}
</style>
